<script lang="ts" setup>
import { ref, Ref, reactive } from "vue";
import { IModelFormExpose, useJxtechModelForm } from "@whjxtech/jxtech-component";
import userBeanServiceApi from "@/api/modules/org/bean/user-bean";
import { disabledBeforeToday } from "@/utils/date";
//定义事件
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void; //保存成功回调
}>();

//定义属性
const props = defineProps({
  /**主键值 */
  userId: String,
  /**部门id */
  unitId: String
});

//model-form ref对象
const JxtechModelFormRef = ref();
const { validate } = useJxtechModelForm(JxtechModelFormRef);
//校验用户密码
const validateUserPassword = (rule: any, value: string, callback: Function) => {
  //密码必须为 大小写字母 以及数字三种情况组合 长度为8-15
  let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (reg.test(value)) {
      if (UserFormData.value.rePassword !== "") {
        JxtechModelFormRef.value.validateField("rePassword");
      }
      callback();
    } else {
      callback(new Error("用户密码必须由大写，小写字母以及数字三种字符组成，且长度为8-15之间"));
    }
  }
};
//检验确认密码
const validatereRePassword = (rule: any, value: string, callback: Function) => {
  let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
  if (value === "") {
    callback(new Error("请输入确认密码"));
  } else if (value !== UserFormData.value.userPassword) {
    callback(new Error("两次输入的密码不匹配"));
  } else if (!reg.test(value)) {
    callback(new Error("用户密码必须由大写，小写字母以及数字三种字符组成，且长度为8-15之间"));
  } else {
    callback();
  }
};

//定义必填校验规则
const rules = {
  userAccount: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
  userFullname: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
  userPassword: [{ required: true, validator: validateUserPassword, trigger: "blur" }],
  rePassword: [{ required: true, validator: validatereRePassword, trigger: "blur" }]
};

//表单数据
const UserFormData: Ref<any> = ref({
  userId: props.userId,
  userPassword: "",
  rePassword: ""
});

//组件对象
const UserFormState = reactive({
  primaryKey: "userId",
  formStatus: null,
  getJxtechModelFormExpose: (): IModelFormExpose => {
    return JxtechModelFormRef.value as IModelFormExpose;
  },
  /**新增成功 */
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res);
  },
  disabledDate: (date: Date) => {
    return disabledBeforeToday(date);
  },
  newBeanFunction: () => {
    // 在表单为 新增 状态下，自定义new-bean方法，默认请求service-api的add方法
    return userBeanServiceApi.add({ unitId: props.unitId });
  },
  saveInsertFunction: (formData: any) => {
    // 自定义新增保存方法，默认请求service-api的saveInsert方法
    return userBeanServiceApi.saveInsert(formData, { unitId: props.unitId });
  }
});

//对外提供方法
defineExpose({
  save: () => JxtechModelFormRef.value.save(),
  validate: () => validate(),
  getFormData: () => UserFormData.value
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    v-model:formStatus="UserFormState.formStatus"
    :new-bean-function="UserFormState.newBeanFunction"
    :save-insert-function="UserFormState.saveInsertFunction"
    :service-api="userBeanServiceApi"
    :primary-key="UserFormState.primaryKey"
    :form-data="UserFormData"
    :rules="rules"
    @add-success="UserFormState.onAddSuccess"
  >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="用户账号" prop="userAccount">
              <el-input placeholder="请输入用户账号" v-model="UserFormData.userAccount"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="用户名称" prop="userFullname">
              <el-input placeholder="请输入用户名称" v-model="UserFormData.userFullname"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="UserFormState.formStatus == 'add'">
          <el-col :span="12">
            <jxtech-model-form-item label="密码" prop="userPassword">
              <el-input placeholder="请输入密码" v-model="UserFormData.userPassword"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="确认密码" prop="rePassword">
              <el-input placeholder="请输入确认密码" v-model="UserFormData.rePassword"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="工号" prop="userNo">
              <el-input placeholder="请输入工号" v-model="UserFormData.userNo"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="性别" prop="userSex">
              <JxtechDictionarySelectExt
                placeholder="请选择性别"
                code-item-id="USER_SEX"
                v-model="UserFormData.userSex"
              ></JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="手机" prop="userMobile">
              <el-input placeholder="请输入手机" v-model="UserFormData.userMobile"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="邮箱" prop="userEmail">
              <el-input placeholder="请输入邮箱" v-model="UserFormData.userEmail"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="是否有效" prop="valid">
              <el-radio-group v-model="UserFormData.valid">
                <el-radio :label="true">有效</el-radio>
                <el-radio :label="false">无效</el-radio>
              </el-radio-group>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="是否锁定" prop="userAccountLocked">
              <el-radio-group v-model="UserFormData.userAccountLocked">
                <el-radio :label="true">锁定</el-radio>
                <el-radio :label="false">正常</el-radio>
              </el-radio-group>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="离职时间" prop="userDisabledDate">
              <el-date-picker
                v-model="UserFormData.userDisabledDate"
                type="date"
                placeholder="请选择离职时间"
                :disabled-date="UserFormState.disabledDate"
              >
              </el-date-picker>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="上级领导" prop="superiorLeader">
              <el-input placeholder="请输入上级领导" v-model="UserFormData.superiorLeader"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="描述" prop="userDescription">
              <el-input
                v-model="UserFormData.userDescription"
                :rows="3"
                type="textarea"
                show-word-limit
                maxlength="255"
              ></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </jxtech-model-form>
</template>
